<!--职位管理-->
<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()" id="formId">
			<el-form-item class="form-button-right fdb-important" style="margin: 0px">
				<el-button v-auth="'attendance:shift:save'" type="primary" @click="addOrUpdateHandle()">新增职位</el-button>
				<el-button v-auth="'attendance:shift:save'" type="primary" @click="addOrUpdateHandle()">导入</el-button>
				<el-button v-auth="'attendance:shift:save'" type="primary" @click="addOrUpdateHandle()">导出</el-button>
				<el-button v-auth="'attendance:shift:save'" type="primary" @click="addOrUpdateHandle()">更多操作</el-button>
			</el-form-item>

			<el-form-item label="部门">
				<el-tree-select
					v-model="state.queryForm.carTypeId"
					:data="queryList"
					value-key="id"
					check-strictly
					clearable
					:render-after-expand="false"
					:props="{ value: 'id', label: 'name', children: 'children' }"
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label="工作性质">
				<el-tree-select
					v-model="state.queryForm.carTypeId"
					:data="queryList"
					value-key="id"
					check-strictly
					clearable
					:render-after-expand="false"
					:props="{ value: 'id', label: 'name', children: 'children' }"
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label="学历要求">
				<el-tree-select
					v-model="state.queryForm.carTypeId"
					:data="queryList"
					value-key="id"
					check-strictly
					clearable
					:render-after-expand="false"
					:props="{ value: 'id', label: 'name', children: 'children' }"
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label="招聘状态">
				<el-tree-select
					v-model="state.queryForm.carTypeId"
					:data="queryList"
					value-key="id"
					check-strictly
					clearable
					:render-after-expand="false"
					:props="{ value: 'id', label: 'name', children: 'children' }"
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item>
				<KeyQuery v-model="state.queryForm.keyword" @getDataList="getDataList()" />
			</el-form-item>
		</el-form>

		<div class="card" :key="index" v-for="(item, index) of defData">
			<el-card>
				<el-row>
					<el-col :span="7" class="left-and-centre">
						<h1>{{ item.name }}</h1>
						<div>
							<span>{{ item.xinzi }}</span
							>| <span>{{ item.xueli }}</span
							>| <span>{{ item.gongzuojingyan }}</span
							>|
							<span>{{ item.fangshi }}</span>
						</div>
						<div>
							<span v-for="i of fns(item.biaoqian)" :style="fnc(i)">{{ biaoqianNameMap.get(i) }}</span>
						</div>
					</el-col>

					<el-col :span="1">
						<el-divider direction="vertical" style="height: 100%"></el-divider>
					</el-col>

					<el-col :span="8" class="left-and-centre">
						<h1>招聘计划</h1>
						<div class="circle">
							计划招聘<span>{{ item.jihua }}</span> 面试<span>{{ item.mianshi }}</span> 录用<span>{{ item.luyong }}</span> 淘汰<span>{{
								item.taotai
							}}</span>
						</div>
						<div>招聘进度 <el-progress :percentage="item.jindu"></el-progress></div>
					</el-col>

					<el-col :span="1">
						<el-divider direction="vertical" style="height: 100%"></el-divider>
					</el-col>

					<el-col :span="7" class="right">
						<el-button v-auth="'module:assetStorage:update'" type="primary" link @click="addOrUpdateHandle(item.id)">编辑</el-button>
						<el-button v-auth="'module:assetStorage:delete'" type="primary" link @click="deleteBatchHandle(item.id)">发布</el-button>
						<el-button v-auth="'module:assetStorage:delete'" type="primary" link @click="deleteBatchHandle(item.id)">停止招聘</el-button>
					</el-col>
				</el-row>
			</el-card>
		</div>

		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getScheduleList"></add-or-update>
	</el-card>
</template>

<style scoped>
.card {
	margin: 0 0 20px 0;
}
.card:hover {
	box-shadow: 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

.start-0 {
	color: #717070;
	background-color: #71707022;
	padding: 5px 10px;
	border-radius: 15px;
}

.start-1 {
	color: #098e50;
	background-color: #098e5022;
	padding: 5px 10px;
	border-radius: 15px;
}

.start-2 {
	color: #9c4d4d;
	background-color: #9c4d4d22;
	padding: 5px 10px;
	border-radius: 15px;
}

.left-and-centre > * {
	margin: 10px 0;
	> span {
		margin: 0 5px;
		border-radius: 15px;
		padding: 5px 10px;
		margin: 0 10px;
	}
}
.circle span {
	background-color: #dddddd66;
}

.right {
	align-self: center;
	text-align: right;
	padding: 0px 10px;
}
</style>

<script setup lang="ts" name="AttendanceShiftIndex">
import { useCrud } from '@/hooks'
import { reactive, ref, nextTick} from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './plane/position-a-u.vue'

const state: IHooksOptions = reactive({
	dataListUrl: '/nb/shift/page',
	deleteUrl: '/nb/shift/delete',
	queryForm: {}
})
const queryList = ref()
const getScheduleList = ref()
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

const defData = ref()
const fnf = () => {
	defData.value = [
		{
			name: 'JAVA开发工程师【上海】',
			xinzi: '16-28k·13薪',
			xueli: '本科',
			gongzuojingyan: '3-5年',
			fangshi: '全职',
			biaoqian: '1,2,3,4',
			jihua: '40',
			mianshi: '100',
			luyong: '20',
			taotai: '80',
			jindu: '50'
		},
		{
			name: 'JAVA开发工程师【杭州】',
			xinzi: '16-20k·16薪',
			xueli: '本科',
			gongzuojingyan: '1-5年',
			fangshi: '全职',
			biaoqian: '1,2,3,4,5',
			jihua: '10',
			mianshi: '80',
			luyong: '40',
			taotai: '30',
			jindu: '40'
		}
	]
}

fnf()

const fns = (str: String) => {
	let s = str.split(',')
	return s
}

const fnc = (i: String) => {
	let aa = 'border-radius: 4px; color: ' + biaoqianMap.get(i) + '; background-color:' + biaoqianMap.get(i) + '44'
	return aa
}

let biaoqianMap = new Map()
biaoqianMap.set('1', '#28D094')

let biaoqianNameMap = new Map()
biaoqianNameMap.set('1', '五险一金')

const LabelFn = () => {
	let form = document.getElementById('formId')
	let maxWidth = 0
	form?.querySelectorAll('label').forEach(function (item, index, array) {
		let width = item.clientWidth
		console.log('width', width)
		if (width > maxWidth) {
			maxWidth = width
		}
	})

	form?.querySelectorAll('label').forEach(function (item, index, array) {
		item.setAttribute('style', 'width:' + maxWidth + 'px;')
	})

	console.log('LabelFn-maxWidth', maxWidth)
}

const formDivFn = () => {
	let form = document.getElementById('formId')
	let maxWidth = 0
	form?.querySelectorAll('#formId > div').forEach(function (item, index, array) {
		let width = item.clientWidth
		console.log('width', width)
		if (width > maxWidth) {
			maxWidth = width
		}
	})

	form?.querySelectorAll('#formId > div').forEach(function (item, index, array) {
		item.setAttribute('style', 'width:' + maxWidth + 'px;')
	})

	console.log('formDivFn-maxWidth', maxWidth)
}

const elFn = async () => {
	await nextTick()
	LabelFn()
	formDivFn()
}
elFn()

const findOrgStaffRef = ref()
const open = () => {
	console.info('1111')
	findOrgStaffRef.value.init()
}
const fn = () => {
	console.info('员工选择 -返现')
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>
